@bgBlack:#000;
@fontWhite:#fff;
@fontGray:rgb(212, 209, 212);
@tablebg:rgb(225,225,225);

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container{
  width: (1200/92.625rem);
  margin: 0 auto;
}

header{
  background:@bgBlack;
  height:(70/92.625rem);
  .container{
    display: flex;
    justify-content: space-between;
    color:@fontWhite;
    font-size: (24/92.5rem);
    .logo{
      line-height: (70/92.5rem);
    }
    .menu{
      display: flex;
      align-items: center;
      ul{
        margin: 0 (24/92.5rem) 0 0;
        list-style: none;
        display: flex;
        li a{
          line-height: (70/92.5rem);
          color: @fontGray;
          font-size: (18/92.5rem);
          text-decoration: none;
          margin-right: (32/92.5rem);
          &:hover{
            color: @fontWhite;
          }
        }

      }
      .user{
        width: (25/92.5rem);
        height: (25/92.5rem);
        img{
          width: 100%;  
          line-height: (70/92.5rem);
        }
      }
    }
  }
}

.breadcrumb{
  margin-top: (100/92.5rem);
  .container{
    display: flex;
    justify-content: end;
    ul{
      display: flex;
      list-style: none;
      margin: 0;
      li{
        display: flex;
        align-items: center;
        &:not(:last-child):after{
          content: ">";
          font-size: (32/92.5rem);
          color: @fontGray;
        }
        a{
          display: flex;
          flex-direction: column;
          font-size: (18/92.5rem);
          align-items: center;
          margin-right: (24/92.5rem);
          color: @fontGray;
          text-decoration: none;
          text-align: center;
          i{
            font-style: normal; 
          }
          img{
            width: (50/92.5rem);
            height: (50/92.5rem);
          }
          &.active{
            color:red;
          }
        }
      } 
    }
  }

}

.goods{
  .container{
    &>.title{
      font-size: (24/92.5rem);
      margin: (24/92.5rem) 0;
    };

    .goodslist{
      .row{
        height: (195/92.5rem);
        font-size: (24/92.5rem);
        ul{
          height: 100%;
          display: flex;
          align-items: center;
          list-style: none;
          border: 1px solid @fontGray;
          .allBtn input{
            margin-right: (10/92.5rem);
          };
          .pname{
            flex: 1;
          }
          .allBtn,.pads,.price,.pnum,.amount,.operate{
            flex: 0.2;
            text-align: center;
          }
        }
      }
      .row.list-item{
        height: (50/92.5rem);
        background:@fontGray;
        line-height: (50/92.5rem);
        margin-bottom: (20/92.5rem);
       
      } 
      .row.list{
        height: (195/92.5rem);
        justify-content: center;
        font-size: (18/92.5rem);
        // border-bottom:1px solid @fontGray;
        .pname{
          display: flex;
          font-size: (18/92.5rem);
          align-items: center;
          .title{
            margin-left: (20/92.5rem)
          }
          img{
            width: (108/92.5rem);
            height: (108/92.5rem);
          }
        }
        .pnum{
          display: flex;
          align-items: center;
          *{
            width: (30/92.5rem);
            height: (30/92.5rem);
            // background: rgb(225,225,225);
          }
          span{
            background-color:rgb(225,225,225);
            border-top: 1px solid black;
            border-bottom: 1px solid black;
          }
        }
        &:hover{
          background: @fontGray;
        }
      }
      .list-total{
        border: 1px solid @fontGray;
        padding: (24/92.5rem);
        & div:first-child{
          // border: 1px solid red;
          padding-left: (40/92.5rem);
          font-size: (18/92.5rem);
        }
        & div.right-info{
          ul{
            border: 0;
            display: block;
            text-align: right;
            font-size:(18/92.5rem);
            list-style: none;
            .right-info-total span{
              color: red;
            }
            li{
              line-height:(50/92.5rem);
            }
          }
        }
      }
    }
  }
}

.lovely{
  // background: yellow;
  margin-top: (50/92.5rem);
  .title{
    font-size: (18/92.5rem);
    padding: (12/92.5rem) 0 (12/92.5rem) (18/92.5rem);
    background: @fontGray;
  }
  .lovely-list{
    ul{
      list-style: none;
      display: flex;
      justify-content: space-between;
      li{
        a{
          color: @fontGray;
          font-size: (16/92.5rem);
          text-align: center;
          text-decoration: none;
        }
        width: 25%;
        // border: 1px solid red;
        padding: (15/92.5rem);
        img{
          width: 100%;
        }
      }
    }
  }
}

footer{
  margin-top: (50/92.5rem);
  height: 300px;
  background: @bgBlack;
  .container{
    display: flex;
    justify-content: space-between;
    padding: (30/92.5rem);
    div{
      a{
        display: block;
        color: @fontGray;
        padding: (25/92.5rem);
        text-decoration: none;
        text-align: center;
        &:first-child{
          font-size: (18/92.5rem);
          
        }
      }
      
    }
  }

}





